<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Character</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">

  <ng-container *ngIf="gameService.player$ | async as player">
    <ion-row>
      <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding">
        
        <ion-card>
          <ion-card-header>
            <ion-card-subtitle>Level {{ player.level.__current }}/{{ player.level.maximum }} {{ player.profession }}</ion-card-subtitle>
            <ion-card-title>{{ player.name }}<span *ngIf="player.title">, the {{ player.title }}</span></ion-card-title>
          </ion-card-header>

          <ion-card-content>
            <ion-list>

              <ion-item *ngIf="player.lastAscension">
                <ion-icon slot="start" [src]="'assets/icon/symbol-ascend.svg'"></ion-icon>

                <span class="ion-padding-start">You last ascended on {{ player.lastAscension | date:'medium' }}.</span>
              </ion-item>

              <ion-item *ngIf="player.level.__current === player.level.maximum">
                <ion-icon slot="start" [src]="'assets/icon/symbol-ascend.svg'"></ion-icon>

                <span class="ion-padding-start">Would you like to ascend?</span>

                <ion-button slot="end" color="primary" (click)="ascend()">Ascend</ion-button>
              </ion-item>

              <ion-item>
                <app-gendervatar slot="start" [gender]="player.gender"></app-gendervatar> 

                <ion-select [value]="player.gender" 
                            (ionChange)="changeGender($event)"
                            placeholder="choose gender"
                            [interfaceOptions]="{ header: 'Change Gender' }">
                  <ion-select-option *ngFor="let gender of player.availableGenders">{{ gender }}</ion-select-option>
                </ion-select>
              </ion-item>

              <ion-item>
                <ion-icon slot="start" [src]="'assets/icon/symbol-title.svg'"></ion-icon>

                <ion-select [value]="player.title" 
                            (ionChange)="changeTitle($event)" 
                            placeholder="no title" 
                            [interfaceOptions]="{ header: 'Change Title' }">
                  <ion-select-option value="">no title</ion-select-option>
                  <ion-select-option *ngFor="let title of player.availableTitles">{{ title }}</ion-select-option>
                </ion-select>
              </ion-item>

              <ion-item>
                <ion-icon slot="start" [src]="'assets/icon/stat-xp.svg'"></ion-icon>

                <span class="ion-padding-start">{{ player.xp.__current | number }} / {{ player.xp.maximum | number }} XP</span>
              </ion-item>

              <ion-item>
                <ion-icon slot="start" [src]="'assets/icon/stat-gold.svg'"></ion-icon>

                <span class="ion-padding-start">{{ player.gold | number }} Gold</span>
              </ion-item>

              <ion-item *ngIf="player.$party">
                <ion-icon slot="start" [src]="'assets/icon/category-party.svg'"></ion-icon>

                <ion-label class="ion-padding-start" text-wrap>
                  <div>Party: {{ player.$party.name }}</div>
                  <div *ngFor="let member of player.$party.members; let i = index">
                    <div class="vertical-center">
                      <strong>
                        <ion-icon name="star" *ngIf="i === 0"></ion-icon> {{ member }}
                      </strong>
                      
                      &nbsp;
                      <span *ngIf="gameService.playerInfoHash[member] as memberPlayer" class="vertical-center">
                        <ion-badge color="secondary">
                          <span *ngIf="memberPlayer.ascensionLevel">{{ memberPlayer.ascensionLevel }}★</span>{{ memberPlayer.level }}
                        </ion-badge>
  
                        &nbsp;
                        {{ memberPlayer.profession }}
                      </span>
                    </div>
                  </div>
                </ion-label>

                <ion-button slot="end" color="warning" (click)="leaveParty()">
                  Leave
                </ion-button>
              </ion-item>

            </ion-list>
          </ion-card-content>
        </ion-card>

      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding">
        
        <ion-card>
          <ion-card-header>
            <ion-card-title>Stamina</ion-card-title>
          </ion-card-header>

          <ion-card-content>
            <ion-list>
              <ion-item>
                <ion-icon slot="start" [src]="'assets/icon/stat-stamina.svg'"></ion-icon>

                <span class="ion-padding-start">
                  {{ player.stamina.__current }}/{{ player.stamina.maximum }} Stamina 
                  <span *ngIf="player.stamina.__current === player.stamina.maximum">
                    (--:--:-- until next stamina)
                  </span>
                  <span *ngIf="player.stamina.__current !== player.stamina.maximum">
                    (<countdown-timer [end]="player.nextStaminaTick"></countdown-timer> until next stamina)
                  </span>
                </span>
              </ion-item>

              <ion-item-divider>Special Action</ion-item-divider>
              <ion-item button 
                        color="primary" 
                        *ngIf="player.$professionData" 
                        (click)="oocAction()" 
                        [disabled]="player.stamina.__current < player.$professionData.oocAbilityCost">
                {{ player.$professionData.oocAbilityName }} ({{ player.$professionData.oocAbilityCost }} Stamina)
              </ion-item>

              <ion-item class="ion-text-wrap" *ngIf="player.$professionData">
                {{ player.$professionData.oocAbilityDesc }}
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding">
        
        <ion-card>
          <ion-card-header>
            <ion-card-title>Stats</ion-card-title>
          </ion-card-header>

          <ion-card-content *ngIf="player.stats">
            
            <ion-list>
              <ion-item-divider>Vital Stats</ion-item-divider>

              <ion-item>
                <ion-button fill="outline" 
                            slot="start"
                            color="dark" 
                            class="ion-margin-end" 
                            (click)="showTrail(player.$statTrail.hp, 'hp', player.stats.hp)">
                  <ion-icon slot="icon-only" [src]="'assets/icon/stat-hp.svg'"></ion-icon>
                </ion-button>
                
                <ion-label>
                  <strong class="ion-margin-end">HP</strong> {{ player.stats.hp | number }}
                </ion-label>
              </ion-item>

              <ion-item *ngIf="player.stats.specialName">
                <ion-button fill="outline" 
                            slot="start"
                            color="dark" 
                            class="ion-margin-end" 
                            (click)="showTrail(player.$statTrail.special, 'special', player.stats.special)">
                  <ion-icon slot="icon-only" [src]="'assets/icon/stat-mp.svg'"></ion-icon>
                </ion-button>
                
                <ion-label>
                  <strong class="ion-margin-end">{{ player.stats.specialName }}</strong> {{ player.stats.special | number }}
                </ion-label>
              </ion-item>

              <ion-item>
                <ion-button fill="outline" 
                            slot="start"
                            color="dark" 
                            class="ion-margin-end" 
                            (click)="showTrail(player.$statTrail.xp, 'xp', player.stats.xp)">
                  <ion-icon slot="icon-only" [src]="'assets/icon/stat-xp.svg'"></ion-icon>
                </ion-button>
                
                <ion-label>
                  <strong class="ion-margin-end">XP Boost</strong> {{ player.stats.xp | number }}
                </ion-label>
              </ion-item>

              <ion-item>
                <ion-button fill="outline" 
                            slot="start"
                            color="dark" 
                            class="ion-margin-end" 
                            (click)="showTrail(player.$statTrail.gold, 'gold', player.stats.gold)">
                  <ion-icon slot="icon-only" [src]="'assets/icon/stat-gold.svg'"></ion-icon>
                </ion-button>
                
                <ion-label>
                  <strong class="ion-margin-end">Gold Boost</strong> {{ player.stats.gold | number }}
                </ion-label>
              </ion-item>

              <ion-item *ngIf="player.stats.salvage > 0">
                <ion-button fill="outline" 
                            slot="start"
                            color="dark" 
                            class="ion-margin-end" 
                            (click)="showTrail(player.$statTrail.salvage, 'salvage', player.stats.salvage)">
                  <ion-icon slot="icon-only" [src]="'assets/icon/action-salvage.svg'"></ion-icon>
                </ion-button>
                
                <ion-label>
                  <strong class="ion-margin-end">Salvage Boost</strong> {{ player.stats.salvage | number }}%
                </ion-label>
              </ion-item>

              <ion-item-divider>Primary Stats</ion-item-divider>

              <ion-item *ngFor="let stat of ['str', 'int', 'dex', 'agi', 'con', 'luk']">
                <ion-button fill="outline" 
                            slot="start"
                            color="dark" 
                            class="ion-margin-end" 
                            (click)="showTrail(player.$statTrail[stat], stat, player.stats[stat])">
                  <ion-icon slot="icon-only" [src]="'assets/icon/stat-' + stat + '.svg'"></ion-icon>
                </ion-button>
                
                <ion-label>
                  <strong class="stat-fixed-width">{{ stat.toUpperCase() }}</strong> {{ player.stats[stat] | number }}
                </ion-label>
              </ion-item>

              <ion-item-divider *ngIf="(player.buffWatches | keyvalue).length > 0">Boosters & Injuries</ion-item-divider>

              <ng-container *ngFor="let buff of player.buffWatches | keyvalue">
                <ion-item *ngFor="let actualBuff of buff.value">
                  <ion-icon slot="start" 
                            [src]="'assets/icon/stat-' + (actualBuff.booster ? 'booster' : 'injury') + '.svg'"></ion-icon>

                  <ion-label class="ion-text-wrap">
                    <h2>{{ actualBuff.name }} ({{ actualBuff.duration }} {{ buff.key }})</h2>
                    <span *ngFor="let stat of (actualBuff.stats || {}) | keyvalue" class="vertical-center" [class.hidden]="stat.value === 0">
                      <ion-icon [src]="'assets/icon/stat-' + stat.key + '.svg'" class="ion-margin-end"></ion-icon> 
                      {{ stat.key.toUpperCase() }} {{ stat.value > 0 ? '+' : '' }}{{ stat.value | number:'1.0-0' }}
                    </span>
                    <span *ngFor="let stat of (actualBuff.permanentStats || {}) | keyvalue" class="vertical-center" [class.hidden]="stat.value === 0">
                      <ion-icon [src]="'assets/icon/stat-attribute.svg'" class="ion-margin-end"></ion-icon> 
                      {{ stat.key.toUpperCase() }} {{ stat.value > 0 ? '+' : '' }}{{ stat.value | number:'1.0-0' }}
                    </span>
                  </ion-label>
                </ion-item>
              </ng-container>
            </ion-list>

          </ion-card-content>
        </ion-card>

      </ion-col>
    </ion-row>
  </ng-container>

</ion-content>
